<template>
  <div
    class="custom_listpinterest_item_panel"
    :class="listRowsCount === 1 && 'single'"
  >
    <div
      class="custom_listpinterest_item_panel_item"
      v-for="(cellItem, index) in item"
      :key="'cellItem_index' + index"
      v-if="cellItem"
    >
      <van-swipe-cell
        ><template #right>
          <SearchSimilarity :item="cellItem"></SearchSimilarity>
        </template>
        <div class="custom_listpinterest_item_panel_item_link">
          <a :href="cellItem.url" target="_blank">
            <img :src="cellItem.image" v-lazy="cellItem.image" />
            <article class="custom_listpinterest_item_panel_cell">
              <header>
                <h1>{{ cellItem.title }}</h1>
              </header>
              <p>{{ cellItem.itemId }} - {{ cellItem.desc }}</p>
            </article>
          </a>
        </div>
      </van-swipe-cell>
      <div class="custom_listpinterest_item_panel_moredock">
        <MoreDork
          :actions="actions"
          @moredockSelectHandle="moredockSelectHandle"
        ></MoreDork>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "listPinterestItem",
  props: {
    item: {
      type: Array,
      default() {
        return [];
      },
    },
    actions: {
      type: Array,
      default() {
        return [];
      },
    },
    listRowsCount: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  components: {
    MoreDork: () =>
      import(
        /* webpackChunkName:'moredork' */ "../../components/moredock/moredock"
      ),
    SearchSimilarity: () =>
      import(
        /* webpackChunkName:'searchSimilarity' */ "../../components/button/searchSimilarity"
      ),
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    moredockSelectHandle(/* actions, index */) {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_listpinterest_item_panel {
  &.single {
    .custom_listpinterest_item_panel_item {
      .van-swipe-cell {
        margin: (5 / @base) 0;
        .van-swipe-cell__wrapper {
          border-radius: (5 / @base);
          min-height: (140 / @base);
          .van-swipe-cell__right {
          }
        }
      }
      .custom_listpinterest_item_panel_item_link {
        a {
          display: flex;
          img {
            width: 50%;
            height: 100%;
          }
          .custom_listpinterest_item_panel_cell {
            width: 50%;
            padding: (10 / @base) (10 / @base) 0;
          }
        }
      }
    }
  }
  .custom_listpinterest_item_panel_item {
    position: relative;
    .van-swipe-cell {
      margin: (5 / @base) 0;
      .van-swipe-cell__wrapper {
        border-radius: (5 / @base);
        min-height: (200 / @base);
        .van-swipe-cell__right {
        }
      }
    }
    .custom_listpinterest_item_panel_moredock {
      position: absolute;
      top: (15 / @base);
      left: (10 / @base);
      border-radius: (30 / @base);
      width: (15 / @base);
      height: (15 / @base);
      overflow: hidden;
      background-color: #333;
      font-size: (14 / @base);
      color: #fff;
      box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
    }
    .custom_listpinterest_item_panel_item_link {
      background-color: #fff;
      overflow: hidden;
      border-radius: (5 / @base);
      box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      a {
        height: 100%;
        display: block;
        img {
          width: 100%;
          height: (120 / @base);
          background-color: #999;
        }
        .custom_listpinterest_item_panel_cell {
          text-align: left;
          padding: 0 (10 / @base) (10 / @base) (10 / @base);
          margin: 0;
          header {
            h1 {
              font-size: (14 / @base);
              font-weight: 400;
            }
          }
          p {
            font-size: (12 / @base);
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            height: (40 / @base);
            padding: (5 / @base) 0;
            line-height: (16 / @base);
          }
        }
      }
    }
  }
}
</style>
